﻿<style>
    .under
    {z-index: 0; width:190px; left: 10px;}
</style>
<script type="text/javascript">
	$(function () {
		$("#slider-range").addClass("under").slider({
			range: true,
			min: @ViewBag.StartHour,
			max: 18,
			values: [@ViewBag.StartHour, 18],
			start: function  (event, ui) {
			dragValue = ui.value;
			},
			slide: function (event, ui) {
				if(ui.values[0]==ui.values[1])
                {
                    //向右推
				    if( ui.value > dragValue)
				    {
						     $(this).slider("values", 1,ui.values[1] + 1);
						     ui.values[1] += 1;
				    }
				    //向左推
				    else if( ui.value < dragValue)
				    {
						     $(this).slider("values", 0,ui.values[0] - 1);
						     ui.values[0] -= 1;
				    }
                }
			   $("#amount").val(ui.values[0] + ":00 - " + ui.values[1] + ":00");
			},
			stop: function (event, ui) {
					if(ui.values[0] == $(this).slider("option", "max" ) )
					{
						 $(this).slider("values", 0,ui.values[0] - 1);
						 ui.values[0] -= 1;
					}
					if(ui.values[1] == $(this).slider("option", "min" ) )
					{
						 $(this).slider("values", 1,ui.values[1] + 1);
						 ui.values[1] += 1;
					}
			   $("#amount").val(ui.values[0] + ":00 - " + ui.values[1] + ":00");
				document.getElementsByName('起始时')[0].value = ui.values[0];
				document.getElementsByName('结束时')[0].value = ui.values[1];
			}
		});

		$("#amount").val($("#slider-range").slider("values", 0) +
			":00 - " + $("#slider-range").slider("values", 1) + ":00");
		document.getElementsByName('起始时')[0].value = $("#slider-range").slider("values", 0);
		document.getElementsByName('结束时')[0].value = $("#slider-range").slider("values", 1);

	});
</script>
<div id="显示时间">
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</div>
<div id="slider-range">
</div>
